<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>getAll</title>
		<link href="getAll.css" rel="stylesheet"/>
	</head>
	<body>
		<div id="kkk">
		<button @click="getUserList()">加载</button>
		<hr />
		id: <input v-model="upda.uid" disabled />
		name: <input v-model="upda.uname"/>
		age: <input v-model="upda.uage"/>
		sex: <input v-model="upda.usex"/>
		<button @click="updaButt()">修改</button>
		<hr />
		<table border="1px" width="50%" align="center" id="inser">
			<caption>用户列表</caption>
			<th>id</th><th>name</th><th>age</th><th>sex</th><th>操作</th>
			<!-- <tr id="inser"></tr> -->
			<tr v-for="i in a">
				<td>{{i.id}}</td>
				<td>{{i.name}}</td>
				<td>{{i.age}}</td>
				<td>{{i.sex}}</td>
				<td>
					<button @click="toUpda(i)">修改</button>
					<button @click="dele(i.id)">删除</button>
				</td> 
			</tr>
			<tr>
				<td></td>
				<td><input type="text" v-model="addUser.aname"/></td>
				<td><input type="text" v-model="addUser.aage"/></td>
				<td><input type="text" v-model="addUser.asex"/></td>
				<td><button @click="addButt()">新增</button></td>
			</tr>
		</table>
		<!-- <h3 v-for="i in a">{{i}}</h3> -->
		</div>
		<script src="../vue.js"></script>
		<script src="../js/axios.js"></script>
		<script>
			const a = new Vue({
				el: '#kkk',
				data: {
					a: [],
					addUser: {
						aname: '',
						aage: '',
						asex: ''
					},
					upda: {
						uid: '',
						uname:'',
						uage: '',
						usex: ''
					}
				},
				methods:{
					getUserList: function(){
						axios.get("http://localhost:8090/user/getAll")
							.then((res) => {
								console.log(res.data)
								this.a = res.data
							})
					},
					update: function(){
						
					},
					dele(id){
						axios.get("http://localhost:8090/user/delete?id="+id)
							.then((res) => {
								// console.log(res.data)
								this.a = res.data
							})
					},
					addButt(){
						let user = {
							name: this.addUser.aname,
							age: this.addUser.aage,
							sex: this.addUser.asex
						}
						console.log(user)
						axios.post("http://localhost:8090/user/saveUser", user)
							.then((res) => {
								this.a = res.data
							})
						
					},
				updaButt(){
						let user = {
							id: this.upda.uid,
							name: this.upda.uname,
							age: this.upda.uage,
							sex: this.upda.usex
						}
						console.log(user)
						axios.put("http://localhost:8090/user/update", user)
						     .then((res) => {
								 this.a = res.data
							 })
						// alert(user.id)
						
					},
					toUpda(i){
						this.upda.uid = i.id
						this.upda.uname = i.name
						this.upda.uage = i.age
						this.upda.usex = i.sex
					}
					
				}
				
			})
			// getUserList()
		</script>
	</body>
</html>
